

@media(min-width: 768px) {
    .padding-top-4{
        padding-top: 3rem!important;
    }
    .head-margin-top{
        margin-top: 30px;
    }
    .panel-container {
        border-right: 1px solid rgba(0, 0, 0, 0.125);
    }
    .panel-chat-list{
        height: 500px;
        /*min-height: 400px;*/
        overflow-y:scroll;
        overflow-x:hidden;
        background: #e3e3e4
    }
    .panel-chat-card{
        height: 600px;
        /*min-height: 550px;*/
        overflow-y:scroll;
        overflow-x:hidden;
        background: #f5f5f5;
        padding-top:20px;
        padding-bottom: 20px;

    }
    .imag-size{
        height: 50px;
        width: 50px;
    }
    .round_icon{
        width: 50px;
        height: 50px;
        display: flex;
        border-radius: 50%;
        align-items: center;
        justify-content: center;
        overflow: hidden;
    }
    .videoinfo {
        top: 0px;
        height: 7%;
        /*background: #7fdf8d;*/
        text-align: center;
        font-size: 16px;
        padding: 4px;
    }
    .videoinfomin{
        top:0px;
        /*background: #7fdf8d;*/
        text-align: center;
        font-size: 10px;
        padding: 0px;

    }

    .videobuttonicon {
        align-content: center;
        z-index: 3;
        bottom: 10px;
        right: 0;
        width: 20%;
        position: absolute;
        text-align: center;
    }

    .remoteVideo{
        position: absolute;
        top: 7%;
        left: 0px;
        width: 80%;
        height: 93%;
        transform: rotateY(180deg);
        -webkit-transform: rotateY(180deg); /* Safari 和 Chrome */
        -moz-transform: rotateY(180deg);

    }

    .videomain {
        position: absolute;
        width: 750px;
        height: 450px;
        background: #222;
        z-index: 999;
    }
    .localVideo {
        position: absolute;
        background: #757474;
        top: 7%;
        right: 0px;
        width: 20%;
        height: 25%;
        z-index: 2;
        transform: rotateY(180deg);
        -webkit-transform: rotateY(180deg); /* Safari 和 Chrome */
        -moz-transform: rotateY(180deg);
    }
    .localVideoMin {
        position: absolute;
        background: #757474;
        top: 18%;
        right: 0px;
        width: 20%;
        height: 25%;
        z-index: 2;
    }

    .videobuttons {
        align-content: center;
        z-index: 3;
        bottom: 10px;
        left: 0;
        width: 80%;
        position: absolute;
        text-align: center;
    }



    .hangup {
        height: 25px;
        font-size: 12px;
        background-color: #FF5151;
        border: none;
        color: white;
        border-radius: 5px;
    }
    .accept {

        height: 25px;
        font-size: 12px;
        background-color: #57a963;
        border: none;
        color: white;
        border-radius: 5px;
    }


    .w-30 {
        max-width: 60%;
        height: auto;
    }
    .sign-font{
        font-size: 12px;
        font-family:新宋体;
        margin-top: 5px;
    }

    .card-footer {
        width: 102%;
        margin-left: -12px;
    }

    .dialog-head-from{
        margin-left: 30px;
        margin-top: 30px;
    }

    .dialog-head-to{
        margin-right: 30px;
        margin-top: 30px;
    }
    .dialog-uploadprogress-to{
        margin-top: 3px;
        margin-right: 83px;
    }

    .dialog-uploadprogress-from{
        margin-top: 3px;
        margin-left: 83px;
    }

    .dialog-progressinfo-to{
        font-size: 8px;
        margin-left: 10px;
    }

    .dialog-progressinfo-from{
        font-size: 8px;
        margin-left: 10px;
    }

    .dialog-content-from{
        background: #ffffff;
        padding: 7px 10px;
    }



    .dialog-content-to{
        background: #95ec69;
        padding: 7px 10px;
    }

    .dialog-head-icon-from{
        width: 43px;
        height: 43px;
        margin-right: 10px;
    }

    .dialog-head-icon-to{
        width: 43px;
        height: 43px;
        margin-left: 10px;
    }

    .dialog-head-icon-list{
        width: 43px;
        height: 43px;
        margin-right: 10px;
    }

    .green-circle {
        position: absolute;
        width: 9px;
        height: 9px;
        border-radius: 50%;
        background-color: #53c753;
        margin-top: -5px;
        /* margin-right: 5px; */
        margin-left: 38px;
    }

    .dialog-imag{

        max-width: 300px;
        max-height: 200px;
    }
    .imagmain{
        text-align: center;
        position: absolute;
        width: 750px;
        height: 550px;
        z-index: 999;
        background: #ffffff;
        box-shadow: 2px 2px 5px rgba(0,0,0,0.3);
    }

    .dialog-button{
        /* width: 0px; */
        height: 20px!important;
        font-size: 12px!important;
    }

    .dropdown-menu {
        position: absolute;
        z-index: 1000;
        display: none;
        min-width: 0rem!important;
        padding: 0.5rem 0;
        margin: 0;
        font-size: 1rem;
        color: #212529;
        text-align: left;
        list-style: none;
        background-color: #fff;
        background-clip: padding-box;
        border: 1px solid rgba(0,0,0,.15);
        border-radius: 0.25rem;
    }

    .dropdown-menu .show {
        position: absolute;
        inset: auto auto 0px 0px;
        margin: 0px;
        transform: translate(-20px, -37.6667px)!important;
    }

    .dropdown-menu {
        position: absolute;
        inset: auto auto 0px 0px;
        margin: 0px;
        transform: translate(-20px, -37.6667px)!important;
    }

    .chat-btn-color{
        background-color: #12b7f5!important;
    }

    .username-font{
        font-size: 15px;
        color: #090909;
    }
    .prompt-font{
        min-width: 70%;
        font-size: 13px;
        color: rgba(92, 88, 86, 0.56);
        margin-top:3px;

    }

    .chat-list-item{
        min-width: 200px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
}

@media(max-width: 768px) {
    .padding-top-4{
        padding-top: 1rem!important;
    }
    .head-margin-top{
        margin-top: 0px;
    }
    .panel-container {
        border-bottom: 1px solid rgba(0, 0, 0, 0.125);
    }
    .panel-chat-list{
        /*height: 174px; */
        overflow-y:scroll; background: #e3e3e4;
        font-size: 12px;
    }
    .panel-chat-card{
        /*height: 280px;*/
        overflow-y:scroll; background: #f5f5f5;
        font-size: 12px;
        padding-top:10px;
        padding-bottom:10px ;
    }

    .videomain {
        position: absolute;
        width: 380px;
        height: 330px;
        background: #222;
        z-index: 999!important;
    }
    .videoinfo {
        top: 0px;
        height: 7%;
        background: #7fdf8d;
        text-align: center;
        font-size: 12px;
        padding: 2px;
    }

    .videobuttons{
        align-content: center;
        z-index: 3;
        bottom: 10px;
        left: 0;
        width: 70%;
        position: absolute;
        text-align: center;
    }

    .remoteVideo{
        position: absolute;
        top: 7%;
        left: 0px;
        width: 70%;
        height: 93%;
        transform: rotateY(180deg);
        -webkit-transform: rotateY(180deg); /* Safari 和 Chrome */
        -moz-transform: rotateY(180deg);

    }
    .localVideo {
        position: absolute;
        background: #757474;
        top: 7%;
        right: 0px;
        width: 30%;
        height: 40%;
        z-index: 2;
        transform: rotateY(180deg);
        -webkit-transform: rotateY(180deg); /* Safari 和 Chrome */
        -moz-transform: rotateY(180deg);
    }
    .videobuttonicon {
        align-content: center;
        z-index: 3;
        bottom: 10px;
        right: 0;
        width: 30%;
        position: absolute;
        text-align: center;
    }
    .localVideoMin {
        position: absolute;
        background: #757474;
        top: 18%;
        right: 0px;
        width: 30%;
        height: 45%;
        z-index: 2;
    }

    .hangup {
        width: 45px;
        height: 30px;
        background-color: #FF5151;
        border: none;
        color: white;
        border-radius: 3px;
        font-size: 10px;
    }
    .accept {
        width: 45px;
        height: 30px;
        background-color: #57a963;
        border: none;
        color: white;
        border-radius: 3px;
        font-size: 10px;
    }



    .w-30 {
        max-width: 80%;
        height: auto;
    }

    .panel-chat-header{
        height: 45px;
    }
    .imag-size{
        height: 35px;
        width: 35px;
    }
    .round_icon{
        width: 35px;
        height: 35px;
        display: flex;
        border-radius: 50%;
        align-items: center;
        justify-content: center;
        overflow: hidden;
    }
    .panel-chat-header>.list-group-item {
        position: relative;
        display: block;
        padding: 0.2rem 1rem;
        color: #212529;
        text-decoration: none;
        background-color: #fff;
        border: 1px solid rgba(0,0,0,.125);
    }

    .list-group-item {
        position: relative;
        display: block;
        padding: 0.5rem 0.5rem;
        color: #212529;
        text-decoration: none;
        background-color: #e9e7e6;
        font-size: 12px;
        width: 100%;
    }
    .card-header {
        padding: 0.3rem 0.7rem;
        margin-bottom: 0;
        background-color: rgba(0,0,0,.03);
        border-bottom: 1px solid rgba(0,0,0,.125);
        font-size: 12px;
    }

    .btn {
        display: inline-block;
        font-weight: 400;
        line-height: 1.5;
        color: #212529;
        text-align: center;
        text-decoration: none;
        vertical-align: middle;
        cursor: pointer;
        -webkit-user-select: none;
        -moz-user-select: none;
        user-select: none;
        background-color: transparent;
        border: 1px solid transparent;
        padding: 0.375rem 0.75rem;
        /* font-size: 1rem; */
        font-size: 12px;
        border-radius: 0.25rem;
        transition: color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out,box-shadow .15s ease-in-out;
    }

    .input-group>.form-control, .input-group>.form-select {
        position: relative;
        flex: 1 1 auto;
        width: 1%;
        min-width: 0;
        font-size: 12px;
    }
    .search-font-size{
        font-size: 12px;
    }
    .sign-font{
        font-size: 10px;
        font-family:新宋体;
        margin-top: 5px;
    }

    .card-footer {
        width: 107%;
        margin-left: -12px;
    }


    .dialog-head-from {
        margin-left: 5px;
        margin-bottom: 5px;
    }


    .dialog-head-to{
        margin-right: 5px;
        margin-bottom: 5px;
    }


    .dialog-content-from{
        background: #ffffff;
        padding: 5px 5px;
    }

    .dialog-content-to{
        background: #95ec69;
        padding: 5px 5px;
    }

    .dialog-head-icon-from{
        width: 30px;
        height: 30px;
        margin-right: 10px;
    }

    .dialog-head-icon-to{
        width: 30px;
        height: 30px;
        margin-left: 10px;
    }

    .dialog-head-icon-list{
        width: 30px;
        height: 30px;
        margin-right: 10px;
    }

    .list-header-font{
        font-size: 12px
    }

    .green-circle {
        width: 5px;
        height: 5px;
        border-radius: 50%;
        background-color: #53c753;
        margin-top: 14px;
        margin-right: 5px;
    }
    .dialog-imag{
        max-width: 100px;
        max-height: 150px;
    }
    .imagmain{
        text-align: center;
        position: absolute;
        width: 90%;
        height: auto;
        z-index: 999;
        background: #ffffff;
        box-shadow: 2px 2px 5px rgba(0,0,0,0.3);
    }
    .dialog-button{
        /* width: 0px; */
        height: 20px!important;
        font-size: 12px!important;
    }

    .dropdown-menu {
        position: absolute;
        z-index: 1000;
        display: none;
        min-width: 0rem!important;
        padding: 0.2rem 0;
        margin: 0;
        font-size: 0.7rem;
        color: #212529;
        text-align: left;
        list-style: none;
        background-color: #fff;
        background-clip: padding-box;
        border: 1px solid rgba(0,0,0,.15);
        border-radius: 0.25rem;
    }

    .dropdown-menu .show {
        position: absolute;
        inset: auto auto 0px 0px;
        margin: 0px;
        transform: translate(-20px, -47.6667px)!important;
    }

    .dropdown-menu {
        position: absolute;
        inset: auto auto 0px 0px;
        margin: 0px;
        transform: translate(-20px, -47.6667px)!important;
    }

    .chat-btn-color{
        background-color: #12b7f5!important;
        font-size: 12px!important;
    }

    body {
        margin: 0;
        font-family: var(--bs-font-sans-serif);
        font-size: 1rem;
        font-weight: 400;
        line-height: 1.5;
        /*color: #212529;*/
        /*background-color: #fff;*/
        /*-webkit-text-size-adjust: 100%;*/
        /*-webkit-tap-highlight-color: transparent;*/
        padding: 0 12px!important;
        -webkit-text-size-adjust: none;
        -webkit-tap-highlight-color: rgba(0, 0, 0, 0)!important;
        background-image: url(../images/bg.png)!important;
        background-size: cover!important;


    }







}


.no-cursor {
    caret-color: transparent;
}

.chat-card-header {
    height: 1.5rem;
    font-size: 10px;
    padding: 2% 0;
}

.linestate-font {
    font-size: 10px;
    display: flex;
    justify-content: center;
    align-items: center;
    color: #4b8cfe;

}

.offstate-font {
    font-size: 10px;
    display: flex;
    justify-content: center;
    align-items: center;

}

.count-font{
    font-size: 10px;
}

/*.online-background {*/
/*    background-color: #00d62475!important;*/
/*}*/

.offline-background {

}

.w-33 {
    width: 33%;
}
.list-focus{
    background-color: #4b8cfe!important;
}

.list-group-item.active {
    z-index: 2;
    color: #fff!important;
    background-color: #c3c4c4!important;
}

.card-footer {
    background-color: rgba(0,0,0,.03);
}
.card-body {
    flex: 1 1 auto;
    padding: 0.3rem 0.5rem;
}

.btn-outline-primary {
    color: #12b7f5!important;
    border-color: #f8f9fa!important;
}

.display-none{
    display: none;
}
.processbar-display-none{
    display: none;
}
.videoclass{
    display: none;
}
.audioclass{
    display: none;
}
.opacity-0{
    opacity: 0;
}





.audioinfo {
    top: 0px;
    /* height: 25px; */
    background: #7fdf8d;
    text-align: center;
    font-size: 12px;
    padding: 2px;
}

.topbar-gradient{
    background-image: linear-gradient(to right,#4b8cfe,#4adafe)
}

.videomain-border-radius{
    border-radius : 5px 5px 5px 5px;
}
.videoinfo-border-radius{
    border-radius : 5px 5px 0px 0px;
}
.videoinfo-color{
    background: #57a963!important;
}








.dialog-from{
    background: #95ec69
}

.card {
    --bs-card-spacer-y: 1rem!important;
    --bs-card-spacer-x: 1rem!important;
    --bs-card-title-spacer-y: 0.5rem!important;
    /*--bs-card-title-color: ;*/
    /*--bs-card-subtitle-color: ;*/
    /* --bs-card-border-width: var(--bs-border-width); */
    --bs-card-border-color: var(--bs-border-color-translucent);
    --bs-card-border-radius: var(--bs-border-radius);
    /*--bs-card-box-shadow: ;*/
    --bs-card-inner-border-radius: calc(var(--bs-border-radius) - (var(--bs-border-width)));
    /* --bs-card-cap-padding-y: 0.5rem; */
    /* --bs-card-cap-padding-x: 0rem; */
    --bs-card-cap-bg: rgba(var(--bs-body-color-rgb), 0.03);
    /*--bs-card-cap-color: ;*/
    /*--bs-card-height: ;*/
    /*--bs-card-color: ;*/
    --bs-card-bg: var(--bs-body-bg);
    --bs-card-img-overlay-padding: 1rem!important;
    --bs-card-group-margin: 0.75rem!important;
    position: relative;
    display: flex;
    flex-direction: column;
    min-width: 0;
    height: var(--bs-card-height);
    color: var(--bs-body-color);
    word-wrap: break-word;
    background-color: var(--bs-card-bg);
    background-clip: border-box;
    border: var(--bs-card-border-width) solid var(--bs-card-border-color)!important;
    border-radius: var(--bs-card-border-radius);
}




.no-border{
    border:none;
}

.container, .container-fluid, .container-lg, .container-md, .container-sm, .container-xl, .container-xxl {
    --bs-gutter-x: 0!important;
    --bs-gutter-y: 0!important;
    width: 100%!important;
    padding-right: calc(var(--bs-gutter-x) * .5);
    padding-left: calc(var(--bs-gutter-x) * .5);
    margin-right: auto;
    margin-left: auto;
}




.list-group-item {
    position: relative;
    display: block;
    padding: 1rem 0.5rem;
    color: #212529;
    text-decoration: none;
    background-color: #e9e7e6!important;
    width: 100%!important;
    border:none!important;

}

.no-border{
    border:none;
}

/*---滚动条默认显示样式--*/

::-webkit-scrollbar-thumb{

    background-color:#b4b2af;
    outline-offset:-2px;

    outline:2px solid #e9e7e6;

    -webkit-border-radius:4px;

    border: 2px solid #e9e7e6;

}

/*---鼠标点击滚动条显示样式--*/

::-webkit-scrollbar-thumb:hover{

    background-color:#b4b2af;



    -webkit-border-radius:4px;

}

/*---滚动条大小--*/

::-webkit-scrollbar{

    width:9px;

    height:9px;

}

/*---滚动框背景样式--*/

::-webkit-scrollbar-track-piece{

    background-color:#e9e7e6;
    width: 30px;
    height: 30px;

    -webkit-border-radius:2px;

}



.bubble {
    position: static;
    /* border: 1px solid #ccc; */
    border-radius: 10px 5px;
    padding: 7px 8px;
    box-shadow: 2px 2px 5px rgba(0, 0, 0, .2);
    height: 28px;
    width: 28px;
    background: #fa5151;
    font-size: 10px;
    /* margin-bottom: 8px; */
    margin-top: -8px;
    margin-right: -16px;
}

.progress {
    display: flex;
    height: 1rem;
    overflow: hidden;
    font-size: 0.5rem!important;
    background-color: #e9ecef;
    border-radius: 0.25rem;
}

.dialog-button-left{
    width: 80px;
    padding: 0 0!important;
    text-align: left!important;
    margin-left: 5px;
}

.dialog-button-right{
    width: 80px;
    padding: 0 0!important;
    text-align: right!important;
    margin-right: 5px ;
}


.body-container {

    /*color: #212529;*/
    /*background-color: #fff;*/
    /*-webkit-text-size-adjust: 100%;*/
    /*-webkit-tap-highlight-color: transparent;*/

    -webkit-text-size-adjust: none;
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0)!important;
    background-image: url(../images/bg.png)!important;
    background-size: cover!important;


}















